<template>
  <div class="head-container">
    <!-- 搜索 -->
    <el-form :inline="true" :model="query" size="small">
      <el-form-item>
        <!-- 查询条件组合 -->
        <div class="form-group">
          <el-select v-model="query.searchVal" clearable placeholder="查询条件" style="margin-right: 5px">
            <el-option
              v-for="item in queryOptions"
              :key="item.key"
              :label="item.display_name"
              :value="item.key"
            />
          </el-select>
          <el-input v-model.trim="query.keyword" placeholder="请输入查询条件" clearable />
        </div>
      </el-form-item>
      <el-form-item label="注册时间">
        <dateSelect ref="dateSelect" @handleTime="getDate" />
      </el-form-item>
      <el-form-item label="最后登录时间">
        <dateSelect ref="dateSelect1" @handleTime="getDate1" />
      </el-form-item>
      <el-select v-model="query.isEnable" placeholder="账号状态" clearable style="width: 120px;" class="filter-item">
        <el-option
          v-for="item in accountStatus"
          :key="item.key"
          :label="item.display_name"
          :value="item.key"
        />
      </el-select>
      <el-select v-model="query.isCommission" placeholder="分润状态" clearable style="width: 120px;" class="filter-item">
        <el-option
          v-for="item in commissionStatus"
          :key="item.key"
          :label="item.display_name"
          :value="item.key"
        />
      </el-select>
      <el-select v-model="query.accType" placeholder="账号类型" clearable style="width: 120px;" class="filter-item">
        <el-option
          v-for="item in accountType"
          :key="item.key"
          :label="item.display_name"
          :value="item.key"
        />
      </el-select>
      <el-button size="mini" type="primary" icon="el-icon-search" class="filter-item" @click="$parent.toQuery">查询</el-button>
      <el-button size="mini" icon="el-icon-refresh" class="filter-item" @click="reset()">重置</el-button>
      <!-- <el-button
        :loading="downloadLoading"
        size="mini"
        type="warning"
        icon="el-icon-download"
        class="filter-item"
      >导出</el-button> -->
    </el-form>
  </div>
</template>

<script>
// import { area } from '@/api/common'
import dateSelect from '@/components/DateSelect/index'
export default {
  components: {
    dateSelect
  },
  props: {
    query: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      downloadLoading: false,
      queryOptions: [
        { key: '000', display_name: '会员账号' },
        { key: '111', display_name: '会员号' },
        { key: '222', display_name: '服务商名称' },
        { key: '333', display_name: '服务商账号' }
      ],
      accountType: [
        { key: 0, display_name: '微信APP' },
        { key: 1, display_name: '微信公众号' },
        { key: 2, display_name: '手机号' },
        { key: 3, display_name: '支付宝' }
      ],
      accountStatus: [
        { key: 1, display_name: '开启' },
        { key: 0, display_name: '关闭' }
      ],
      commissionStatus: [
        { key: 1, display_name: '开启' },
        { key: 0, display_name: '关闭' }
      ]
    }
  },
  methods: {
    dayin() {
      console.log(this.query)
    },
    // 时间选择（最后登录时间）
    getDate({ startTime, endTime, val }) {
      this.query.startTime = startTime
      this.query.endTime = endTime
    },
    // 时间选择（注册时间）
    getDate1({ startTime, endTime, val }) {
      this.query.startTime1 = startTime
      this.query.endTime1 = endTime
    },
    reset() {
      this.$parent.toReset()
      this.$refs.dateSelect.clearDate()
      this.$refs.dateSelect1.clearDate()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-cascader {
  width: 300px !important;
}
</style>
